<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 这句话的意思就是：在我们的屏幕上 并且 最大的宽度是800px 设置我们想要的样式 */
        
        @media screen and (max-width:800px) {
            body {
                background-color: bisque;
            }
        }
    </style>

</head>

<body>
    <!-- 媒体查询 可以针对不同的屏幕尺寸设置不同的样式 -->
    <!-- 用@media 开头  mediatype 媒体类型 
          关键字 and not only   
          media feature 媒体特性 必须有小括号包含 -->
</body>

</html>